<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<h3>姓名，年龄，爱好，女朋友</h3>
		<div id="app"v-cloak>
		{{msg}}<br />
		{{name}}
		<hr />
		{{age}}<br />
		{{hobby}}<br />
		{{hobby[hobby.length-1]}}
		<hr />
		{{cars[0].name}}{{cars[0].color}}<br />
		{{cars[1].name}}{{cars[1].color}}
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				msg:"hello Vue JS",
				name:"王虎",
				age:20,
				hobby:["篮球","健身","极限运动"],
				gire:{
						name:"未知",
						age:"未知"
					},
				cars:[
					{name:"劳斯莱斯",color:"white"},
					{name:"奔驰",color:"red"},
					{name:"宝马",color:"green"}
					]
				}
		});
	</script>
</html>
